<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .c1{
       vertical-align: middle;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #39bf3e">
      <h1 style="color: white;font-size: 22px">
        <img src="imgs/logo.png" class="c1" width="45px" height="30px">
        <span >后台管理系统</span>
        <span v-if="user.nickname!=null" style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void(0)"  @click="logout()">退出登录</a>
                </span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu style="height: 773px"
                 @select="handleSelect"
                 default-active="2"
                 class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="1-1">分类列表</el-menu-item>
            <el-menu-item index="1-2">添加分类</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-takeaway-box"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="2-1">所有商品</el-menu-item>
            <el-menu-item index="2-2">库存导出</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-takeaway-box"></i>
              <span>库存管理</span>
            </template>
            <el-menu-item index="3-1">所有库存</el-menu-item>
            <el-menu-item index="3-2">库存导出</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-truck"></i>
              <span>物流管理</span>
            </template>
            <el-menu-item index="4-1">物流列表</el-menu-item>
            <el-menu-item index="4-2">添加物流</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="5-1">订单处理</el-menu-item>
            <el-menu-item index="5-2">查询订单</el-menu-item>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="6-1">客服管理</el-menu-item>
            <el-menu-item index="6-2">角色管理</el-menu-item>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-picture"></i>
              <span>轮播图管理</span>
            </template>
            <el-menu-item index="7-1">轮播图列表</el-menu-item>
            <el-menu-item index="7-2" @click="addbanner">添加轮播图 </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <el-main>
        <el-table v-if="currentIndex=='1-1'"
                  :data="categoryArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号" width="180"></el-table-column>
          <el-table-column
                  prop="name"
                  label="分类名称"
                  width="180">
          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" @click="categoryUpdate(scope.row)" type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此分类吗？"
                      @confirm="categoryDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='7-1'"
                  :data="bannerArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column
                  label="轮播图"
                  width="180">
            <template slot-scope="scope">
              <!--scope.row代表当前行对应数组中的对象-->
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" @click="bannerUpdate(scope.row)"
                         type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此轮播图吗？"
                      @confirm="bannerDelete(scope.$index, scope.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='2-1'"
                  :data="productArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="categoryId" label="类别" width="80"></el-table-column>
          <el-table-column prop="title" label="商品标题" width="200"></el-table-column>
          <el-table-column prop="price" label="商品价格" width="80"></el-table-column>
          <el-table-column prop="oldPrice" label="商品原价" width="80"></el-table-column>
          <el-table-column prop="created" label="上架时间" width="80"></el-table-column>
          <el-table-column prop="viewCount" label="浏览量" width="80"></el-table-column>
          <el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
          <el-table-column prop="num" label="商品库存" width="80"></el-table-column>
          <el-table-column
                  label="商品图片"
                  width="100">
            <template slot-scope="scope">
              <!--scope.row代表当前行对应数组中的对象-->
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" @click="productUpdate(scope.row)"
                         type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此商品吗？"
                      @confirm="productDelete(scope.$index, scope.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="currentIndex=='3-1'"
                  :data="operationArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="title" label="商品标题" width="200"></el-table-column>
          <el-table-column prop="price" label="进价" width="80"></el-table-column>
          <el-table-column prop="oldPrice" label="售价" width="80"></el-table-column>
          <el-table-column prop="inventory" label="库存" width="80"></el-table-column>
          <el-table-column prop="storageData" label="入库时间" width="80"></el-table-column>
          <el-table-column prop="expirationDate" label="保质期" width="80"></el-table-column>
          <el-table-column label="操作">

            <template slot-scope="scope">
              <el-button size="mini" @click="productUpdate(scope.row)"
                         type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此商品吗？"
                      @confirm="productDelete(scope.$index, scope.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="currentIndex=='4-1'"
                  :data="productArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="title" label="物流名称" width="80"></el-table-column>
          <el-table-column prop="price" label="重量" width="80"></el-table-column>
          <el-table-column prop="oldPrice" label="物流价格" width="80"></el-table-column>
          <el-table-column prop="saleCount" label="剩余物流单数" width="150"></el-table-column>

          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" @click="productUpdate(scope.row)"
                         type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此商品吗？"
                      @confirm="productDelete(scope.$index, scope.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="currentIndex=='5-1'"
                  :data="productArr"
                  style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="订单编号" width="160"></el-table-column>
          <el-table-column prop="title" label="商品名" width="80"></el-table-column>
          <el-table-column prop="price" label="用户名" width="80"></el-table-column>
          <el-table-column prop="oldPrice" label="物流" width="80"></el-table-column>
          <el-table-column prop="saleCount" label="订单状态" width="150"></el-table-column>

          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" @click="productUpdate(scope.row)"
                         type="success">修改</el-button>
              <el-popconfirm
                      title="您确定删除此订单吗？"
                      @confirm="productDelete(scope.$index, scope.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        currentIndex:"1-1",
        categoryArr:[],/*分类数组*/
        bannerArr:[],/*轮播图数组*/
        productArr:[],/*商品数组*/
        operationArr:[],/*库存数组*/
        logisticsArr:[],/*物流数组*/
        indentArr:[],/*订单数组*/
        user:{}
      }
    },
    methods:{
      addbanner(){
          location.href="/insertBanner.html";
    },
      logout(){//发出退出登录的请求。
        if (confirm("您确定退出登录吗？")){
          axios.get("/logout").then(function () {
            location.href="/"
          })
        }
      },
      productUpdate(product){
        location.href="/updateProduct.html?id="+product.id;
      },
      productDelete(index,product){
        axios.get("/product/delete?id="+product.id).then(function () {
          v.productArr.splice(index,1)
        })
      },
      bannerUpdate(banner){
        location.href="/updateBanner.html?url="+banner.url+"&id="+banner.id;
      },

      bannerDelete(index,banner){
        axios.get("banner/delete?id="+banner.id).then(function (response) {
          v.bannerArr.splice(index,1);
        })
      },
      categoryUpdate(category){
        let name = prompt("请输入新的分类名称");
        if (name==null){
          return;
        }
        if (name=='') {
          v.$message.error("分类不能为空");
          return;
        }
        let c = {id:category.id,name:name}
        axios.post("/category/update",c).then(function () {
          category.name = name;
        })
      },

      categoryDelete(index,category){
        //发请求删除分类
        axios.get("/category/delete?id="+category.id).then(function () {
          //删除数组中的元素  (删除位置,删除数量)
          v.categoryArr.splice(index,1);
        })
      },
      handleSelect(key,keyPath){
        if (key=='1-2'){
          let name = prompt("请输入分类的名称");
          if (name==null){
            return;
          }
          if (name=='') {
            v.$message.error("分类不能为空");
            return;
          }
          axios.get("/categrory/insert?name="+name).then(function (response) {
            v.categoryArr=response.data;
          })
          v.$message("添加分类");
        }else if (key=='2-2'){
          location.href="/insertBanner.html"
        }else if (key=='3-2'){
          location.href="/insertProduct.html";
        }else if (key=='4-2'){
          /*跳转添加物流页面*/
        }else if (key=='5-2'){
          let Id = prompt("请输入订单编号");
          if (Id==null){
            return;
          }else if (Id==''){
            v.$message.error("订单不能为空");
            return;
          }else {
            /*根据订单号查询订单*/
          }
        }
        else{
          v.currentIndex = key;
        }
      }
    },
    created:function () {
      //发请求获取分类信息
      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
      axios.get("/banner/select").then(function (response) {
        v.bannerArr=response.data;
      })
      axios.get("/product/select/admin").then(function (respones) {
        v.productArr=respones.data;
      })
      axios.get("/currentUser").then(function (response) {
        v.user = response.data;
        if (v.user==""){
          alert("请先登录")
          location.href="/login.html";
        }
      })
    }
  })
</script>
</html>